<template>
  <div class="order-wrapper" v-if="address">
    <div class="content">
      <div class="inner">
        <div class="deliver-msg">
          <div class="top">
            <div class="left">
              <i></i>
              <span>选择配送方式</span>
            </div>
            <div class="right">
              <div
                class="pick"
                @click="tabItemClick(index)"
                :class="{'active': activeIndex === index}"
                v-for="(item, index) of way"
                :key="index"
              >{{item}}</div>
            </div>
          </div>
          <div class="bottom" @click="selectedAddressClick" v-if="activeIndex === 1">
            <div class="left">
              <i class="icon_adr"></i>
            </div>
            <div class="center" v-if="address.length">
              <p class="user-info">
                <span class="name">{{address[0].receiver_name}}</span>
                <span class="tel">{{address[0].receiver_phone}}</span>
              </p>
              <p class="adr">{{address[0].area}} {{address[0].address}}</p>
            </div>
            <div class="add-address" v-else>请选择地址</div>
            <div class="right">
              <i class="icon_back"></i>
            </div>
          </div>
        </div>
        <panel-order-detail
          :showBtn="false"
          :goodsInfo="goodsDetailInfo"
          v-if="goodsDetailInfo"
          :activeIndex="activeIndex"
        />
        <div class="btn">
          <my-button name="确认兑换" @btnClick="handleBtnClick" />
        </div>
      </div>
    </div>
    <transition name="slide">
      <router-view @success="hanldeSuccess"></router-view>
    </transition>
  </div>
</template>
<script>
import PanelOrderDetail from './panel-order-detail'
import { integralGoodsExchange } from '@/api/my'
import AddList from '@/views/my/mixins/addr-list'
import GoodsDetail from '@/views/my/mixins/goods-detail'
const ERR_OK = 200
export default {
  components: {
    PanelOrderDetail
  },
  mixins: [AddList, GoodsDetail],
  data () {
    return {
      activeIndex: 0,
      way: []
    }
  },
  created () {
    this.deliverType()
  },
  methods: {
    hanldeSuccess () {
      this._getAddressList()
    },
    selectedAddressClick () {
      this.$router.replace({
        path: '/my/exchange-center/integral-goods/order/address-list',
        query: { delivery_type: this.$route.query.delivery_type, id: this.$route.query.id }
      })
      // if (this.address && this.address.length) {
      //   // this.$router.push({ path: '/my/exchange-center/integral-goods/order/address-list' })
      // } else {
      //   // this.$router.push({ path: '/my/exchange-center/integral-goods/order/edit-address' })
      // }
    },
    deliverType () {
      const type = parseInt(this.$route.query.delivery_type)
      if (type === 1) {
        this.way = ['到店自提']
      } else if (type === 2) {
        this.way = ['快递配送']
      } else if (type === 3) {
        this.way = ['到店自提', '快递配送']
      }
    },
    tabItemClick (index) {
      this.activeIndex = index
    },
    handleBtnClick () {
      // this.$router.replace({
      //   path: '/my/exchange-center/integral-goods/order/order-detail'
      // })
      let type
      if (parseInt(this.$route.query.delivery_type) !== 3) {
        type = parseInt(this.$route.query.delivery_type)
        switch (type) {
          case 1:
            this._integralGoodsExchange({
              goodsId: this.$route.query.id,
              deliveryType: type
            })
            break
          case 2:
            this._integralGoodsExchange({
              goodsId: this.$route.query.id,
              deliveryType: type,
              addressId: this.address[0].id
            })
        }
      } else if (parseInt(this.$route.query.delivery_type) === 3) {
        switch (this.activeIndex) {
          case 0:
            type = 1
            this._integralGoodsExchange({
              goodsId: this.$route.query.id,
              deliveryType: type
            })
            break
          case 1:
            type = 2
            this._integralGoodsExchange({
              goodsId: this.$route.query.id,
              deliveryType: type,
              addressId: this.address[0].id
            })
            break
        }
      }
    },
    _integralGoodsExchange ({ goodsId, deliveryType, addressId }) {
      return integralGoodsExchange({ goodsId, deliveryType, addressId })
        .then(res => {
          if (res.code === ERR_OK) {
            const me = this
            this.$toast({
              message: '兑换成功~',
              duration: 1000,
              onClose: function () {
                me.$router.replace({ path: '/my/exchange-center/integral-goods/order/order-detail', query: { orderId: res.data.id } })
              }
            })
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
@include slideEnter();
.order-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fafafa;
  z-index: 12;
  touch-action: none;
  .content {
    width: 100%;
    height: 100%;
    padding: 0.52rem 0.36rem;
    box-sizing: border-box;
    .inner {
      position: relative;
      width: 100%;
      height: 100%;
      .deliver-msg {
        width: 6.78rem;
        background: rgba(255, 255, 255, 1);
        font-size: 0;
        .top {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0.3rem 0.34rem;
          box-sizing: border-box;
          border-bottom: 1px solid #eeeeee;
          .left {
            height: 100%;
            display: flex;
            align-items: center;
            i {
              display: inline-block;
              width: 0.41rem;
              height: 0.33rem;
              background: url("../../../assets/images/cc.png") no-repeat;
              background-size: cover;
              margin-right: 0.3rem;
            }
            span {
              font-size: 0.26rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(0, 4, 0, 1);
            }
          }
          .right {
            display: flex;
            align-items: center;
            justify-content: center;
            .pick {
              padding: 0.13rem 0.25rem;
              font-size: 0.22rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              border: 1px solid rgba(204, 204, 204, 1);
              margin-right: 0.31rem;
              &:last-of-type {
                margin-right: 0;
              }
              &.active {
                border-color: #000400;
                background: url("../../../assets/images/icon_xuanzhong.png")
                  no-repeat;
                background-position: right bottom;
                background-size: 0.3rem 0.2rem;
              }
            }
          }
        }
        .bottom {
          width: 100%;
          padding: 0.39rem 0.34rem;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left {
            i {
              display: inline-block;
              width: 0.36rem;
              height: 0.36rem;
              background: url("../../../assets/images/dz.png") no-repeat;
              background-size: cover;
            }
          }
          .center {
            .user-info {
              display: flex;
              .name {
                font-size: 0.28rem;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(0, 4, 0, 1);
                line-height: 0.32rem;
                margin-right: 0.18rem;
              }
              .tel {
                font-size: 0.24rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: rgba(123, 123, 123, 1);
                line-height: 0.32rem;
              }
            }
            .adr {
              width: 5rem;
              font-size: 0.24rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              margin-top: 0.26rem;
              line-height: 0.32rem;
              @include ellipsis();
            }
          }
          .add-address {
            flex: 1;
            height: 100%;
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(0, 4, 0, 1);
            line-height: 0.32rem;
            text-align: left;
            margin-left: 0.3rem;
          }
          .right {
            height: 100%;
            padding: 0.2rem 0.1rem;
            .icon_back {
              display: inline-block;
              width: 0.12rem;
              height: 0.2rem;
              background: url("../../../assets/images/_1.png") no-repeat;
              background-size: cover;
            }
          }
        }
      }
      .btn {
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 0;
        width: 100%;
      }
    }
  }
}
</style>
